<template>
  <div p-5>
    <div class="accraditation-top">
      <div class="accraditation-top-tittle">行政许可审批</div>
    </div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="行政许可审批">
        <ApproveInfo :id="route.query.id" :title="false"></ApproveInfo>
        <div class="accraditation-body-box">
          <div class="accraditation-body-box-tittle">
            <div class="accraditation-body-box-tittle-left"></div>
            <div class="accraditation-body-box-tittle-right">审批信息</div>
          </div>
          <div class="accraditation-body-box-info">
            <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol">
              <a-row :gutter="24">
                <a-col class="gutter-row" :span="8">
                  <a-form-item label="审批结果" name="nodeStatus">
                    <a-radio-group v-model:value="formState.nodeStatus">
                      <a-radio value="2">同意</a-radio>
                      <a-radio value="3">不同意</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col class="gutter-row" :span="8">
                  <a-form-item label="审批意见" :name="caseApproveOpinions(formState.nodeStatus)">
                    <a-textarea
                      :rows="4"
                      v-model:value="formState.approveOpinions"
                      placeholder="请输入审批意见"
                      :maxlength="128"
                      show-count
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="任务审批记录">
        <DynamicTable
          :data-request="approveTableData"
          :columns="approveCoumns"
          :search="false"
          :pagination="false"
          :showToolBar="false"
          bordered
        >
        </DynamicTable>
      </a-tab-pane>
    </a-tabs>

    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12"
        ><a-button size="large" @click="cacel">取消</a-button>
        <a-button size="large" type="primary" @click="onSubmit">提交</a-button></a-space
      >
    </div>
  </div>
</template>
<script setup lang="ts">
  import router from '@/router';
  import ApproveInfo from '../accraditation/components/approveInfo.vue';
  import { useRoute } from 'vue-router';
  import { reactive, ref } from 'vue';
  import { approveTask, getApproveRecord } from '@/api/administrative';
  import { message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { approveCoumns } from './columns';
  const tabsViewStore = useTabsViewStore();
  const route = useRoute();

  const activeKey = ref('1');

  const cacel = () => {
    router.push({
      path: '/administrative/administrative/approve',
    });
  };

  const approveTableData = async (params): Promise<API.TableListResult> => {
    const data = await getApproveRecord(route.query.id);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const formRef = ref();
  const labelCol = {
    style: { width: '80px' },
  };
  const formState = reactive({
    nodeStatus: '', //审批状态；2、同意  3、拒绝
    approveOpinions: '', //审批意见
  });

  const caseApproveOpinions = (val) => {
    switch (val) {
      case '2':
        return '';
      case '3':
        return 'approveOpinions';
      default:
        return '';
    }
  };

  const rules = {
    nodeStatus: [
      {
        required: true,
        message: '请选择审批状态',
        trigger: 'change',
      },
    ],
    approveOpinions: [
      {
        required: true,
        message: '请输入审批意见',
        trigger: 'blur',
      },
    ],
  } as any;

  const onSubmit = () => {
    formRef.value
      .validate()
      .then(async () => {
        let params = {
          id: route.query.progressId,
          caseId: route.query.id,
          nodeStatus: formState.nodeStatus,
          approveOpinions: formState.approveOpinions,
        };

        const res = await approveTask(params);
        if (res.code == 0) {
          message.success('提交审批成功！');
          tabsViewStore.closeCurrentTabToUrl(route, '/administrative/administrative/approve');
        }
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
</script>
<style lang="less" scoped>
  .accraditation {
    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }
    &-body {
      &-box {
        margin: 16px 0;
        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0 13px 0;
          &-left {
            border: 1px solid #0f53ac;
            margin-right: 7px;
            border-radius: 4px;
            height: 14px;
          }

          &-right {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(68, 68, 68, 1);
          }
        }

        // &-info {
        // }
      }
    }
  }
</style>
